<template>
  <div class="item-content">
    <el-input
      v-if="item.category == 'input'"
      :placeholder="item.placeholder"
      v-model="formValue[item.name]"
      :type="item.type"
      :rows="item.rows"
      :maxlength="item.max"
      clearable
      class="form_input"
    />
    <el-select
      v-if="item.category == 'select'"
      :placeholder="item.placeholder"
      v-model="formValue[item.name]"
      clearable
      class="form_input"
    >
      <el-option
        v-for="(option,optIndex) in item.option"
        :key="optIndex"
        :label="option.label"
        :value="option.value"
      />
    </el-select>
    <el-date-picker
      v-if="item.category == 'datePicker'"
      v-model="formValue[item.name]"
      :type="item.type"
      :placeholder="item.placeholder"
      :start-placeholder="item.startPlaceholder"
      :end-placeholder="item.endPlaceholder"
      value-format="item.format"
      class="form_input"
      clearable
    />
    <el-time-select
      v-if="item.category == 'timeSelect'"
      v-model="formValue[item.name]"
      :picker-options="{
        start: item.start,
        step: item.step,
        end: item.end
      }"
      :placeholder="item.endName ? item.startPlaceholder : item.placeholder"
      class="form_input"
    />
    <el-time-select
      v-if="item.category == 'timeSelect' && item.endName"
      v-model="formValue[item.endName]"
      :picker-options="{
        start: item.start,
        step: item.step ,
        end: item.end,
        minTime: formValue[item.name]
      }"
      :placeholder="item.endPlaceholder"
      class="form_input"
    />
    <el-cascader
      v-if="item.category == 'cascader'"
      :options="item.option"
      v-model="formValue[item.name]"
      :placeholder="item.placeholder"
      class="form_input"
    />
    <el-switch
      v-if="item.category == 'switch'"
      v-model="formValue[item.name]"
      :active-value="item.activeValue"
      :inactive-value="item.inactiveValue"
      class="form_input"
    />
    <el-rate
      v-if="item.category == 'rate'"
      v-model="formValue[item.name]"
      :show-text="item.showText"
      class="form_input form_input_rate"
    />
    <el-color-picker
      v-if="item.category == 'colorPicker'"
      v-model="formValue[item.name]"
      class="form_input"
    />
    <el-input-number
      v-if="item.category == 'inputNumber'"
      v-model="formValue[item.name]"
      :min="item.min"
      :max="item.max"
      :controls-position="item.controlsPosition"
      :size="item.size"
      class="form_input"
    />
    <el-slider
      v-if="item.category == 'slider'"
      v-model="formValue[item.name]"
      :step="item.step"
      :min="item.min"
      :max="item.max"
      :vertical="item.vertical"
      :show-input="item.showInput"
      class="form_input"
    />
    <div v-if="item.category == 'radio'" class="form_input">
      <el-radio-group v-model="formValue[item.name]">
        <div v-if="!item.radioButton">
          <el-radio
            v-for="(radio,radioI) in (item.option || [item])"
            :key="radioI"
            :label="radio.value"
          >
            {{ radio.label }}

          </el-radio>
        </div>
        <div v-else >
          <el-radio-button
            v-for="(radio,radioI) in (item.option || [item])"
            :key="radioI"
            :label="radio.value"
          >
            <div>{{ radio.label }}</div>
          </el-radio-button>
        </div>
      </el-radio-group>
      <!-- <el-radio-group v-else v-model="formValue[item.name]">

      </el-radio-group> -->
    </div>
    <div v-if="item.category == 'checkbox'" >
      <el-checkbox-group v-model="formValue[item.name]" class="form_input">
        <el-checkbox
          v-for="(checkbox,checkboxI) in (item.option || [item])"
          :label="checkbox.value"
          :key="checkboxI"
        >
          {{ checkbox.label }}
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <el-button v-if="item.category == 'button'" :size="item.size" :type="item.type" @click="submitForm(item)"><i v-if="item.icon" :class="item.icon"/> {{ item.bLabel }}</el-button>
    <!-- @click="submitForm" -->
  </div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
  name: 'XFrom',
  components: { draggable },
  props: {
    item: {
      type: [Array, Object],
      default: null
    },
    form: {
      type: [Array, Object],
      default: null
    }
  },
  data() {
    return {

    }
  },
  computed: {
    formValue: {
      get() {
        return this.form
      },
      set(oo) {
        console.log(oo)
      }
    }
  },
  watch: {

  },
  created() {

  },
  methods: {
    submitForm(item) {
      if (item.name == 'submitForm') {
        this.$emit('submitForm', this.formValue)
      } else {
        item.click && item.click()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .item-content{
    width: 100%;
    & > {
      width: 100%;
    }
  }
  .form_input{
      width: 100%;
      &.form_input_rate{
        margin-top: 8px;
      }
  }
</style>
